<template>
  <div>
    <div v-for="(item,index) in navList" :key="item.name">
      <div
          class="navItem"
          @click="go(item.path, index)"
          :class="navIndex === index ? 'activeItem' : ''"
      >{{ item.name }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "selfMenu",
  beforeMount() {
    this.watchRoute(this.$route.path)
  },
  data(){
    return {
      navList:[
        {
          path: '/BaseAll',
          name: '总体分析',
        },
        {
          path: '/roadPost',
          name: '路内停车',
        },
        {
          path: '/operatingDepot',
          name: '经营厂库'
        },
        {
          path: '/chargeManage',
          name: '充电管理',
        },
        {
          path: '/post',
          name: '预约共享',
        },
        {
          path: '/page3',
          name: '居住配件'
        },
        {
          path: '/page3',
          name: '枢纽换乘'
        },
        {
          path: '/page3',
          name: '综合研判'
        },
      ],
      navIndex:""
    }
  },
  methods: {
    watchRoute(newVal){
      this.navList.forEach((item,index) => {
        if(newVal.indexOf(item.path) !== -1){
          this.navIndex = index
        }
      })
    },
    go(path){
      this.$router.push(path)
    }
  },
  watch: {
    // 监听路由变化修改顶部栏选中项
    "$route.path": function(newVal) {
      this.watchRoute(newVal)
    },
    immediate: true,
    deep: true
  }

}
</script>

<style scoped>
.navItem {
  cursor: pointer;
  padding: 0 30px;
  font-size: 20px;
  font-weight: 500;
  color: #0092FF;
  line-height: 72px;
  width: 80px;
}
.activeItem {
  color: #00FFE6;
  background: url("../../assets/selfImp/menuActionBg.png") no-repeat bottom;
  background-size: 100% 80%;
}
/*.activeItem:after {*/
/*  content: '';*/
/*  height: 2px;*/
/*  width: calc(100% + 30px);*/
/*  border-radius: 2px;*/
/*  background-color: #00FFE6;*/
/*}*/

</style>
